<template>
  <div class="app-container">
    <addDialog v-if="addDialogShow" @close="addDialogClose"></addDialog>
    <disDialog v-if="setRoleDialogShow" @close="roleDialogClose" :userInfo="userInfo"></disDialog>
    <div style="overflow:hidden">
      <el-form style="float:left">
        <el-form-item label="手机号" :label-width="formLabelWidth" class="input">
          <el-input v-model="form.phoneNum" placeholder="请输入手机号"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" icon="el-icon-search" style="float:left;margin-left:10px" @click="getList">查询</el-button>
      <el-button type="primary" icon="el-icon-plus" style="float:left;margin-left:20px" @click="add">新增</el-button>
    </div>
    <el-table :data="userData" border style="width: 100%" class="actTable">
      <el-table-column prop="visitorPhoneNum" label="手机号" min-width="120"></el-table-column>
      <el-table-column prop="visitorRealName" label="员工姓名" min-width="120"></el-table-column>
      <el-table-column prop="roleStr" label="员工角色" min-width="120"></el-table-column>
      <el-table-column label="操作" min-width="120">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="initPwd(scope.row)">初始化密码</el-button>
          <el-button type="primary" size="small" @click="setRole(scope)">分配角色</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="size">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import addDialog from './addDialog'
import disDialog from './distributeDialog'
import { getVisitorsList, visitorInitPwd } from 'api/visitorManager'
import { handlePagination } from 'mixins/index.js'
export default {
  components: {
    disDialog, addDialog
  },
  mixins: [handlePagination],
  data() {
    return {
      userData: [],
      activityId: '',
      form: {
        phoneNum: ''
      },
      formLabelWidth: '120px',
      setRoleDialogShow: false,
      addDialogShow: false,
      userInfo: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    add() {
      this.addDialogShow = true
    },
    setRole(scope) {
      this.userInfo = scope.row
      this.setRoleDialogShow = true
    },
    async getList() {
      const parm = { ...this.form }
      parm.pageSize = this.pageSize
      parm.curPage = this.curPage - 1
      try {
        let back = await getVisitorsList(parm)
        back = back.data
        if (back.resultCode === '200') {
          this.userData = back.result
          this.size = back.size
        }
      } catch (err) {
        this.$alert('请求出错', '提示')
      }
    },
    async initPwd(scope) {
      try {
        console.log('userId = ' + scope)
        let back = await visitorInitPwd(scope.userId)
        back = back.data
        if (back.resultCode === '200') {
          this.$alert('密码初始化成功', '提示')
          this.getList()
        }
      } catch (err) {
        this.$alert('请求出错', '提示')
      }
    },
    roleDialogClose() {
      console.log('will close addDialogClose 01 ' + this.setRoleDialogShow)
      this.setRoleDialogShow = false
      console.log('will close addDialogClose02 ' + this.setRoleDialogShow)
      this.getList()
    },
    addDialogClose() {
      this.addDialogShow = false
      this.getList()
    }
  }
}
</script>
<style scoped lang="scss">
  .actTable{
    margin-top:20px;
  }
  .banner {
    width: 200px;
  }
  .input{
    float: left;
  }
  .block{
    float: right;
    margin-top:15px;
  }
</style>
